<template>
  <div :style="{ display: 'flex' }" id="infoCardDSYS">
    <a-card
      :style="{ width: '360px' }"
      class="card"
      v-for="info in infos"
      :key="info.infoId"
      :title="info.infoTitle"
    >
      {{ info.infoText }}<br />
      <a-button class="btDelete" @click="deleteInfo(info.infoId)"
        >Delete</a-button
      >
    </a-card>
  </div>
</template>
    
<script>
import axios from "axios";

export default {
  data() {
    return {
      infos: [
        {
          infoId: 1,
          infoTitle: "官方公告",
          infoText: "这是官方公告内容",
          isDelete: 0,
        },
      ],
    };
  },
  methods: {
    deleteInfo(id) {
      axios
        .post("/deleteSystemInfo", {
          ID: id,
        })
        .then((response) => {
          if (response) {
            alert("删除成功");
          } else {
            alert("删除失败");
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    
  },
  mounted() {
    axios
      .get("/systemInfo",{
        params: {
            searchKey: "",
          },
      })
      .then((response) => {
        this.infos = response.data;
      })
      .catch(function (error) {
        console.log(error);
      });
  },
};
</script>
      
    <style >
#infoCardDSYS {
  padding: 100px;
}
#infoCardDSYS .card {
  margin: 20px;
}
#infoCardDSYS .btDelete {
  margin-top: 25px;
}
</style>